<template>
  <div id="container">
    <el-container>
      <el-header height="100px" class="home_header">
        <Header />
      </el-header>
      <el-main class="main">
        <el-container>
          <el-aside class="home_aside" :width="width">
            <div class="menuTop">
              <i :class="menuIcon" @click="menuSwitch" style="color:white"></i>
            </div>
            <Menu :collapse="collapse" />
          </el-aside>
          <el-main style="margin-top:20px;padding:0">
            <router-view />
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Header from "@/views/Header.vue";
// import { getMenu } from "@/api/resource.js";
import Menu from "@/views/Menu.vue";
export default {
  name: "Home",
  components: {
    Menu,
    Header,
  },
  data() {
    return {
      collapse: false,
      width: "200px",
      menuIcon: "el-icon-s-fold",
    };
  },
  methods: {
    menuSwitch() {
      this.collapse = !this.collapse;
      if (this.collapse) {
        this.width = "60px";
        this.menuIcon = "el-icon-s-unfold";
      } else {
        this.width = "200px";
        this.menuIcon = "el-icon-s-fold";
      }
    },
  },
};
</script>

<style>
#container {
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.menuTop {
  text-align: right;
  padding: 10px;
}
.main {
  margin: 0;
  padding: 0;
  height: 100%;
}

.home_aside {
  margin-bottom: 10px;
  background-color: rgb(83, 84, 87);
  height: 500px;
}
.home_footer {
  height: 80px;
  justify-content: center;
}
.home_main {
  background-color: indianred;
}
.home_header {
  margin: 0;
  padding: 0;
}
</style>